<template>
	<view class="page">
		<!-- 头部导航 -->
		<view class="header-bag">
			<image src="../../static/icons/icon-Get-into@3.png" class="back" @click="goBack" />
			<view class="header-center">
				<text>评价（{{ totalCount }}）</text>
			</view>
		</view>

		<!-- 商家信息 -->
		<view class="merchant-info" v-if="storeInfo">
			<view class="merchant-title">{{ storeInfo.merch_name }}</view>
			<view class="merchant-rating">
				<view class="rating-left">
					<view class="score">{{ storeInfo.eval_score }}</view>
					<view class="score-text">
						<text>综合评分</text>
					</view>
				</view>
				<view class="rating-right">
					<view class="stars">
						<image v-for="(star, index) in getStars(storeInfo.eval_score)" :key="index" 
							:src="star ? '../../static/o2o/icon-bkx@2x (2).png' : '../../static/o2o/icon-bkx@2x (1).png'" 
							class="star-img" />
					</view>
				</view>
			</view>
		</view>

		<!-- 评价列表 -->
		<view class="content-all">
			<view class="content-list">
				<view v-for="(item, index) in evalList" :key="index" class="eval-item">
					<view class="eval-header">
						<view class="user-info">
							<image :src="item.header_img ? imgBaseUrl + item.header_img : '../../static/icon-mrtx@3x.png'" 
								class="avatar" />
							<text class="username">{{ item.username }}</text>
						</view>
						<view class="eval-time">{{ item.created }}</view>
						<view class="rating-stars">
							<image v-for="(star, starIndex) in getStars(item.score)" :key="starIndex" 
								:src="star ? '../../static/o2o/icon-bkx@2x (2).png' : '../../static/o2o/icon-bkx@2x (1).png'" 
								class="star-small" />
						</view>
					</view>
					<view class="eval-content">
						<text class="store-name">{{ item.address }}</text>
						<text class="eval-text">{{ item.content }}</text>
						<view class="eval-images" v-if="item.img_list && item.img_list.length > 0">
							<image v-for="(img, imgIndex) in item.img_list" :key="imgIndex" 
								:src="imgBaseUrl + img" class="eval-img" 
								@click="previewImage(imgIndex, item.img_list)" />
						</view>
						<view class="merchant-reply" v-if="item.reply">
							<text class="reply-label">商家回复：</text>
							<text class="reply-content">{{ item.reply }}</text>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 加载更多 -->
		<view class="loading" v-if="loading">
			<text>加载中...</text>
		</view>
		<view class="no-more" v-if="noMore && evalList.length > 0">
			<text>没有更多了</text>
		</view>
	</view>
</template>

<script>
	import { o2oApi } from '../../api/index.js'
	import { getToken } from '../../api/auth.js'
import {
		inject
	} from 'vue'

	export default {
		data() {
			return {
				baseUrl: inject('$baseUrl'),
				groupId: '',
				storeId: '',
				storeInfo: null,
				evalList: [],
				totalCount: 0,
				page: 1,
				loading: false,
				noMore: false,
			}
		},
		onLoad(options) {
			this.groupId = options.group_id || ''
			this.storeId = options.store_id || ''
			this.loadEvalList()
		},
		onReachBottom() {
			if (!this.loading && !this.noMore) {
				this.page++
				this.loadEvalList()
			}
		},
		methods: {
			// 加载评价列表
			async loadEvalList() {
				if (this.loading) return
				
				this.loading = true
				try {
					const res = await o2oApi.getEvalList({
						merch_id: this.storeId,
						group_id: this.groupId,
						type: 0,
						page: this.page
					})
					
					if (res.r === 0) {
						if (this.page === 1) {
							this.storeInfo = res.data.store_info
							this.evalList = res.data.eval_list || []
							this.totalCount = res.data.total || 0
						} else {
							this.evalList = [...this.evalList, ...(res.data.eval_list || [])]
						}
						
						// 判断是否还有更多数据
						if (!res.data.eval_list || res.data.eval_list.length === 0) {
							this.noMore = true
						}
					} else {
						uni.showToast({
							title: res.msg || '加载失败',
							icon: 'none'
						})
					}
				} catch (error) {
					console.error('加载评价列表失败:', error)
					uni.showToast({
						title: '网络错误',
						icon: 'none'
					})
				} finally {
					this.loading = false
				}
			},
			
			// 获取星级数组
			getStars(score) {
				const stars = []
				const fullStars = Math.floor(score)
				for (let i = 0; i < 5; i++) {
					stars.push(i < fullStars)
				}
				return stars
			},
			
			// 预览图片
			previewImage(current, images) {
				const urls = images.map(img => this.baseUrl + img)
				uni.previewImage({
					current: current,
					urls: urls
				})
			},
			
			// 返回上一页
			goBack() {
				uni.navigateBack()
			}
		}
	}
</script>

<style scoped>
	.page {
		background: #fff;
		min-height: 100vh;
	}

	/* 头部样式 */
	.header-bag {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		height: 88rpx;
		background: #ff1e00;
		display: flex;
		align-items: center;
		z-index: 100;
		padding-top: var(--status-bar-height);
	}

	.back {
		width: 60rpx;
		height: 60rpx;
		margin-left: 30rpx;
	}

	.header-center {
		flex: 1;
		text-align: center;
		color: #fff;
		font-size: 36rpx;
		font-weight: bold;
	}

	/* 商家信息样式 */
	.merchant-info {
		position: fixed;
		top: calc(88rpx + var(--status-bar-height));
		left: 0;
		right: 0;
		background: #fff;
		z-index: 99;
		border-bottom: 1rpx solid #ddd;
	}

	.merchant-title {
		font-size: 68rpx;
		color: #212121;
		height: 200rpx;
		line-height: 200rpx;
		text-align: center;
		border-bottom: 1rpx solid #ddd;
		font-weight: 700;
	}

	.merchant-rating {
		padding: 30rpx 0;
		display: flex;
		align-items: center;
	}

	.rating-left {
		display: flex;
		align-items: center;
		padding-left: 360rpx;
	}

	.score {
		font-size: 112rpx;
		color: #ff1e00;
		padding-right: 40rpx;
	}

	.score-text {
		padding-top: 50rpx;
	}

	.score-text text {
		font-size: 56rpx;
		color: #444;
	}

	.rating-right {
		flex: 1;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.stars {
		display: flex;
	}

	.star-img {
		width: 46rpx;
		height: 46rpx;
		margin-right: 10rpx;
	}

	/* 内容区域 */
	.content-all {
		margin-top: calc(288rpx + var(--status-bar-height));
		padding: 0 60rpx;
	}

	.eval-item {
		border-top: 1rpx solid #ddd;
		padding-top: 80rpx;
		margin-bottom: 40rpx;
	}

	.eval-header {
		display: flex;
		align-items: center;
		position: relative;
		margin-bottom: 40rpx;
	}

	.user-info {
		display: flex;
		align-items: center;
		flex: 1;
	}

	.avatar {
		width: 144rpx;
		height: 144rpx;
		border-radius: 50%;
		margin-right: 40rpx;
	}

	.username {
		font-size: 64rpx;
		color: #444444;
	}

	.eval-time {
		font-size: 52rpx;
		color: #9c9c9c;
		margin-right: 60rpx;
	}

	.rating-stars {
		position: absolute;
		left: 240rpx;
		top: 100rpx;
		display: flex;
	}

	.star-small {
		width: 44rpx;
		height: 44rpx;
		margin-right: 8rpx;
	}

	.eval-content {
		margin-left: 240rpx;
		padding-right: 40rpx;
	}

	.store-name {
		display: block;
		font-size: 52rpx;
		color: #6e6e6e;
		margin-bottom: 20rpx;
	}

	.eval-text {
		display: block;
		font-size: 56rpx;
		color: #212121;
		line-height: 70rpx;
		margin-bottom: 40rpx;
	}

	.eval-images {
		display: flex;
		flex-wrap: wrap;
		margin-bottom: 40rpx;
	}

	.eval-img {
		width: 364rpx;
		height: 368rpx;
		margin-right: 40rpx;
		margin-bottom: 40rpx;
		border-radius: 8rpx;
	}

	.merchant-reply {
		border-top: 1rpx solid #ddd;
		padding-top: 40rpx;
		line-height: 70rpx;
	}

	.reply-label {
		color: #6e6e6e;
		font-size: 56rpx;
	}

	.reply-content {
		color: #212121;
		font-size: 56rpx;
	}

	/* 加载状态 */
	.loading, .no-more {
		text-align: center;
		padding: 40rpx;
		color: #999;
		font-size: 28rpx;
	}
</style>